<template>
  <div class="app-container job">
    <div class="filter-container">
      <div class="search">
        <v-search
          input-placeholder="请输入表名"
          select-placeholder="请选择状态"
          start-date-placeholder="请选择开始时间"
          end-date-placeholder="请选择结束时间"
          :is-selecte="false"
          :selecte-list="selecteList"
          :is-download="false"
          :is-add="false"
          :is-sort-feild="false"
          :feilds.sync="field"
          @onDownload="onDownload"
          @onSearch="onSearch"
          @onAdd="addNew"
          @fieldChange="fieldChange"
        />
      </div>
    </div>
    <el-table
      v-loading="isDataLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="编号" prop="sort_asc" sortable width="80" />
      <el-table-column label="名称" prop="name" width="180" />
      <el-table-column label="表名" prop="table_name" width="180" />
      <el-table-column label="显示字段">
        <template slot-scope="scope">
          <el-tag
            v-for="(item, index) in JSON.parse(scope.row.table_fields_sort)"
            :key="index"
          >
            {{ item.title }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="create_time" width="180" />
      <el-table-column label="操作" align="center" width="80">
        <template slot-scope="scope">
          <!-- <a @click.stop="see(scope.row)">查看</a> -->
          <a @click.stop="edit(scope.row)">修改</a>
          <!-- <a type="text" @click.stop="deleted(scope.row.id)">删除</a> -->
        </template>
      </el-table-column>
    </el-table>
    <v-pagination
      v-show="total>0"
      :cache="true"
      :auto-scroll="false"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog
      title="字段显示顺序"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      width="320px"
      top="40px"
    >
      <draggable v-model="fieldList">
        <transition-group>
          <div
            v-for="(item, index) in fieldList"
            :key="`transition${index}`"
            class="draggable"
          >
            <div class="draggable-left">
              {{ item.title }}({{ item.name }})
            </div>
            <div v-if="unShowList.length === 0" class="draggable-right">
              <i class="el-icon-view text-success" @click="unshow(item)" />
            </div>
            <div v-else class="draggable-right">
              <i
                v-if="unShowList.includes(item.name)"
                class="el-icon-view text-danger"
                @click="unshow(item)"
              />
              <i v-else class="el-icon-view text-success" @click="unshow(item)" />
            </div>
          </div>
        </transition-group>
      </draggable>
    </el-dialog>
  </div>
</template>

<script>
import vSearch from '@/components/Search'
import vPagination from '@/components/Pagination'
import { list, destroy, update, unshowList, setUnshow } from '@/api/table'
import draggable from 'vuedraggable'

export default {
  components: {
    vSearch,
    vPagination,
    draggable
  },
  data() {
    return {
      selecteList: [{
        id: 1,
        name: '正常'
      }, {
        id: 2,
        name: '锁定'
      }],
      total: 0,
      searchData: {},
      list: [],
      field: [],
      listQuery: {
        page: 1,
        limit: 10,
        where: []
      },
      selectedIds: [],
      selectedNames: '',
      isDataLoading: false,
      fieldList: [],
      unShowList: [],
      dialogTableVisible: false,
      selectedItem: null
    }
  },
  created() {
    this.getList()
  },
  updated() {
    if (this.selectedItem) {
      update(this.selectedItem.id, this.fieldList).then(({ status, msg }) => {
        if (status && msg) {
          this.getList()
        }
      })
    }
  },
  methods: {
    object_filter(obj, list) {
      if (list.length === 0) return false
      const result = list.find(item => item === obj)
      if (result === undefined) {
        return false
      } else {
        return true
      }
    },
    remove(key, array) {
      return array.filter(function(item) {
        return item !== key
      })
    },
    unshow(row) {
      const name = row.name
      const flag = this.object_filter(name, this.unShowList)
      if (flag) {
        this.unShowList = this.remove(name, this.unShowList)
      } else {
        this.unShowList.push(name)
      }
      const _data = this.unShowList
      setUnshow({
        id: this.selectedItem.id,
        list: _data
      }).then(_ => {})
    },
    fieldChange(data) {
      // console.log(data)
    },
    addNew() {
      console.log('add')
    },
    async edit(row) {
      this.dialogTableVisible = true
      this.fieldList = JSON.parse(row.table_fields_sort)
      const result = await unshowList(row.id)
      if (result.status) {
        this.unShowList = result.data
      }
      this.selectedItem = row
    },
    see(row) {
      console.log(row.length)
    },
    deleted(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        destroy(id).then(({ status }) => {
          if (status) {
            this.getList()
          }
        })
      }).catch(() => { })
    },
    getList() {
      this.isDataLoading = true
      list(this.listQuery).then(({ status, data }) => {
        this.isDataLoading = false
        if (status) {
          const _data = data
          this.list = _data.data
          this.total = _data.total
          this.field = _data.field_list
        }
      })
    },
    onDownload(data) {
      console.log(data)
    },
    onSearch(data) {
      this.listQuery.where = []
      this.listQuery.page = 1
      if (data.keywords) {
        this.listQuery.where.push({
          field: '_.username',
          op: 'like',
          value: data.keywords
        })
      }
      if (data.selected) {
        this.listQuery.where.push({
          field: '_.status',
          op: 'eq',
          value: data.selected
        })
      }
      if (data.dateRange) {
        const start = data.dateStart
        const end = data.dateEnd
        this.listQuery.where.push({
          field: '_.create_time',
          op: 'between',
          value: [start, end]
        })
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.draggable{
    line-height: 30px;
    height: 30px;
    border-top: 1px solid #ecececec;
    border-left: 1px solid #ecececec;
    border-right: 1px solid #ecececec;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    .draggable-left{
      width: 80%;
      cursor: move;
      margin-left: 10px;
    }
    .draggable-right{
      width: 20%;
      text-align: right;
      cursor: pointer;
      margin-right: 10px;
      .text-success{
        color: #67C23A;
      }
      .text-danger{
        color: #F56C6C;
      }
    }
    &:last-child{
      border-bottom: 1px solid #ecececec;
    }
  }
</style>
